import { XDomain } from '@/ts/base/schema';
import { ISession, ITarget } from '@/ts/core';
import { Button, Card, Form, Input, message, Radio, Space, Spin, Typography } from 'antd';
import React, { useState } from 'react';
import { useEffectOnce } from 'react-use';
import StyleVars from './theme/StyleVars';

interface IProps {
  target: ITarget;
  session: ISession;
  id: string;
}

export default function PlatformSetting({ target, session, id }: IProps) {
  const [loaded, setLoaded] = useState(false);
  const [setting, setSetting] = useState<XDomain>(null!);

  useEffectOnce(() => {
    init();
  });

  async function init() {
    const s = await target.domain.loadDomainSetting();
    setSetting(s);
    setLoaded(true);
  }

  function updateSetting(setter: (setting: XDomain) => void) {
    setter(setting!);
    setSetting({ ...setting! });
  }

  async function saveDomain() {
    let s = setting!.domain || '';
    s = s.replace(/^https?:\/\//, '').replace(/\/$/, '');

    try {
      const url = new URL('http://' + s);
    } catch (e) {
      message.error('请输入正确的域名');
      return;
    }

    try {
      await target.domain.saveDomainSetting(setting!);
      message.success('保存成功');
    } catch (error: any) {
      message.error(error.message || error);
      return;
    }
  }

  return (
    <Card
      title={<h4>平台设置</h4>}
      id={id}
      className="setting-card"
      size="small"
      extra={
        <Button type="primary" onClick={() => saveDomain()}>
          保存
        </Button>
      }>
      <Spin spinning={!loaded}>
        {loaded && (
          <div>
            <div>
              <b>主题设置</b>

              <Form initialValues={setting}>
                <Form.Item label="主题" name={['theme', 'name']}>
                  <Radio.Group
                    value={setting.theme.name}
                    onChange={(e) =>
                      updateSetting((s) => (s.theme.name = e.target.value))
                    }>
                    <Radio value="default">默认</Radio>
                    <Radio value="custom">自定义</Radio>
                  </Radio.Group>
                </Form.Item>
                {setting.theme.name === 'custom' && (
                  <StyleVars
                    value={setting.theme.styleVars}
                    files={setting.staticFiles}
                    onChange={(e) => updateSetting((s) => (s.theme.styleVars = e))}
                    onFilesChange={(e) => updateSetting((s) => (s.staticFiles = e))}
                  />
                )}
              </Form>
            </div>
            <div>
              <div
                style={{ width: '100%', marginBottom: '8px' }}
                className="flex items-center">
                <b>网站设置</b>
              </div>
              <Form initialValues={setting}>
                <Form.Item label="网站域名" name="domain" required>
                  <Input
                    value={setting.domain}
                    onChange={(e) => updateSetting((s) => (s.domain = e.target.value))}
                  />
                </Form.Item>
              </Form>
            </div>
          </div>
        )}
      </Spin>
    </Card>
  );
}
